


<!DOCTYPE html>
<html lang="en">

<head>
    
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在线格式化sql,html,xml,json并还原在线工具-postjson</title>
    <meta name="robots" content="all" />
    <meta name="keywords" content="在线格式化sql,格式化html,美化xml,json" />
    <meta name="description" content="在线格式化sql,html,xml,json,对其进行美化,简单压缩" />
    <link rel="shortcut icon" href="/static/coolaf/img/favicon.ico">
    
    
    <script src="/static/coolaf/js/ie-emulation-modes-warning.js"></script>

    
    
    
    <link rel="stylesheet" href="/static/coolaf/bootstrap/css/bootstrap.min.css">
    <script src="/static/coolaf/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/coolaf/css/offcanvas.css">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

</head>
<script>
        var showToast = function (msg,option) {
        outTime = 3000;
        if (option&&option.outTime) {
            outTime = option.outTime;
        }
        if (!$(".showtoastresult").html()) {
            html = "<div class='showtoastresult' style='min-width: 50px;width: auto;padding: 10px 20px;font-size: 14px;font-weight: bold;background: rgba(7, 17, 27, 0.66);border-radius: 6px;color: rgb(255, 255, 255);top: 50%;z-index: 1000001;transform: translate3d(-50%, -50%, 0px);position: fixed;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);'></div>";
            $(document.body).append(html);
        }
        $(".showtoastresult").html(msg);    
        $(".showtoastresult").fadeIn("slow").fadeOut(3000);
        return false;
    }
</script>
<style>
    .navbar-brand,.navbar-nav>li>a{
        color:#fdfdfd!important;
    }
    .navbar-nav>li>a:hover{
        color:#ff8839!important;
    }
</style>
<body >
    
	<script>
	$("#black1").click(function(){
		var s = $(this).html();
		if (s=="夜间模式") {
			$('body').css("background-color","black");
			$('body').css("opacity","0.7")
			$('body').css("-moz-opacity","0.7")
			$('body').css("filter","alpha(opacity=50)")
			$(this).html('白天模式');
		}else{
			$('body').css("background-color","");
			$('body').css("opacity","")
			$('body').css("-moz-opacity","")
			$('body').css("filter","")
			$(this).html('夜间模式');
		}
	});
	</script>
    
    <div class="container">

        <div class="row row-offcanvas row-offcanvas-right main-contain">
            
            <div class="col-xs-12 col-sm-9">
                
                
              
<style>
    .left {
        margin-top: 10px
    }
</style>
<h3>xml、sql、html 格式化和最小化</h3>
<div style="width:808px">
    <div>
        <form id="JSONValidate" method="post" action="." name="JSONValidate">
            <input type="hidden" id="reformat" value="1">
            <input type="hidden" id="compress" value="0">
            <textarea id="retpretty" name="retpretty"></textarea>
            <div class="validateButtons clear">
                <div class="left">
                    <button class="btn btn-primary valinew" aid="xml">格式化xml</button>
                    <button class="btn btn-primary valinew" aid="xml" vv='1'>最小化xml</button>
                    <button class="btn btn-primary" id="xmlexam">xml示例</button>
                    <button class="btn btn-primary" id="cleararea">清空</button>
                </div>
                <div class="left">
                    <button class="btn btn-success valinew" aid="sql">格式化sql</button>
                    <button class="btn btn-success valinew" aid="sql" vv='1'>最小化sql</button>
                    <button class="btn btn-success" id="sqlexam">sql示例</button>

                </div>

                <div class="left">
                    <button class="btn btn-warning valinew" aid="html">格式化html</button>

                </div>

            </div>
        </form>
    </div>
    <div style='color:#FF5151;padding-top:20px'>
        <pre id="results"> 
1.本工具是对xml、sql、html进行格式化和美化，使其更容易阅读
2.同时还对xml和sql进行最小化转化，使其减少存储空间
        </pre>
    </div>

</div>
<script src="/static/coolaf/js/text/lib/codemirror.min.js"></script>

<script src="/static/coolaf/js/vkbeautify.min.js"></script>
<script src="/static/coolaf/js/beautify-html.min.js"></script>
<script src="/static/coolaf/js/text/javascript.min.js"></script>
<link rel="stylesheet" href="/static/coolaf/js/text/lib/codemirror.css">
<script>
    $(document).ready(function() {
        var editor = CodeMirror.fromTextArea(document.getElementById("retpretty"), {
            height: "500px",
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping: true
                
        });
        $("#cleararea").click(function() {
            editor.setValue('');
            return false;
        });
        
        $(".valinew").click(function() {
            var aid = $(this).attr("aid");
            var vv = $(this).attr("vv");
            if (aid == "xml") {
                mode = "xml";
            } else if (aid == "sql") {
                mode = "sql";
            } else if (aid == "css") {
                mode = "css";
            } else if (aid == "html") {
                mode = "html";
            } else {
                mode = "javascript";
            }

            try {
                editor.setOption("mode", "javascript");
                var s = editor.getValue();
                if (vv == 1) {
                    ss = ffmin(mode, s);
                } else {
                    ss = ff(mode, s);
                }
                editor.setValue(ss);
            } catch (e) {
                console.log(e);
                return false;
            }

            return false;
        });
        var ff = function(m, s) {
            if (m == "xml") {
                ss = vkbeautify.xml(s);
            } else if (m == "sql") {
                ss = vkbeautify.sql(s);
            } else if (m == "css") {
                ss = vkbeautify.css(s);
            } else if (m == "html") {
                var a = "{'indent_inner_html': false,'indent_size': 2, 'indent_char': ' ','wrap_line_length': 78,'brace_style': 'expand','unformatted': ['a', 'sub', 'sup', 'b', 'i', 'u'],'preserve_newlines': true,'max_preserve_newlines': 5,'indent_handlebars': false}";
                ss = html_beautify(s, a);
            }
            return ss;
        }
        var ffmin = function(m, s) {
            if (m == "xml") {
                ss = vkbeautify.xmlmin(s);
            } else if (m == "sql") {
                ss = vkbeautify.sqlmin(s);
            } else if (m == "css") {
                ss = vkbeautify.cssmin(s);
            }
            return ss;
        }

        $("#xmlexam").click(function() {
            var s = '<?xml version="1.0"?><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don'
            s += 't forget me this weekend! < /body></note > ';
            editor.setValue(s);
            return false;
        });
        $("#sqlexam").click(function() {
            var s = 'select a.title,a.username,b.adddate from table a,(select max(adddate) adddate from table where table.title=a.title) b';
            editor.setValue(s);
            return false;
        });
    });
</script>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2db240112a8dbb4d6a2869381e5fbfed";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>



 </div>
	
    </div>
</div>


  <script src="/static/coolaf/bootstrap/js/bootstrap.min.js"></script>
  <script src="/static/coolaf/js/offcanvas.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?18f18be6e58f13d87192835c8c15fdca";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
try{
　　top.location.hostname;
　　if (top.location.hostname != window.location.hostname) {
　　　　top.location.href =window.location.href;
　　}
}
catch(e){
　　top.location.href = window.location.href;
}
</script>
<script>
$.ajax({
	  url:"/side",
	  type:"GET",
	  dataType:"jsonp",
	  success:function(data){
		
		$(".sideclass").each(function(){
			
		});
	  }
     });
</script>
<a href='/m'>m</a>

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
$(document).ready(function () {
		$("#newpayup").click(function () {
			$("#payup").show();
		});
		$("#payup").click(function () {
			$(this).hide();
		});
});
</script>
<style>
		.payup {
			display: none;
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
			z-index: 6666
		}

		.postpay {
			position: relative;
			float: right;
		}

		.postpay button {
			color: yellow;
			width: 68px;
			height: 50px;
			word-wrap: break-word;
			background-color: hsl(340, 100%, 75%);
			box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em .3em, hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, rgba(0, 0, 0, 0.2) 0 .5em 5px;
			border: none;
			padding-right: 1.2em;
			padding-left: 0.8em;
			border-radius: 3em 1em / 5em 1em;
		}

		.payupimg {
			width: 680px;
			height: 390px;
			margin: 0 auto;
			position: relative;
			top: 256px;
			z-index: 9999;
			background: white;
		}

		.payup img {
			float: left;
			width: 280px;
			height: 280px;
			margin:30px 30px 30px 30px;
		}

		.imgtext {
			width: 330px;
			display: inline-block;
			text-align: center;
			font-size: 20px;
			font-weight: blod;
		}
	</style>
	<div class='payup' id='payup'>
		<span></span>
		<div class='payupimg'>
			<img src="/static/coolaf/img/zfb.png" >
			<img src="/static/coolaf/img/wx.png" >
			<div>
				<span class='imgtext'>支付宝</span>
				<span class='imgtext'>微信</span>
			</div>
		</div>
	</div>
</body>
</html>
